<!-- 
    头像、用户信息/退出登录/修改密码
 -->
 <template>
    <div class="user-header">
        <el-dropdown @command="cheageUser">
        <span class="el-dropdown-link">
            <el-avatar :src="user.avatarUrl || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"/>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :command="1" :icon="UserFilled">{{$t('userinfo')}}</el-dropdown-item>
            <el-dropdown-item :command="2" divided :icon="Unlock">{{$t('modifypassword')}}</el-dropdown-item>
            <el-dropdown-item :command="3" divided :icon="Right">{{$t('logout')}}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
 </template>

 <script setup lang="ts">
    import {UserFilled,Unlock,Right} from '@element-plus/icons-vue'
    import { useRouter } from "vue-router"
    import { useUserStore } from '@/stores/admin/index'
    const store = useUserStore()
    const router = useRouter()
    // 获取状态管理数据
    let user = store.user

    const cheageUser = (e : number)=>{
        switch (e) {
            case 1:// 跳转路由
                router.push('/index/userinfo')
                break;
            case 2://跳转到密码修改
                router.push('/index/modifypassword')
                break;
            case 3://退出登录
                store.loginOut()    //调用状态管理函数
                break;
            default:
                break;
        }
    }
 </script>
 <style lang="less" scoped>
    .el-avatar{
        width: 30px;
        height: 30px;
        cursor: pointer;
    }
 </style>